<template>
    <div>
        <div class="inner_select">
            <div class="block">
                <el-tabs v-model="activeName">
                    <el-tab-pane :label="i" :name="i" v-for="i in this.lst">
                        <div class="inner-power">
                            {{detail[i]}}
                            <div class="okay" @click="okay" v-show="selected.indexOf(i) == -1"></div>
                            <div class="bad" v-show="selected.indexOf(i) != -1" style="color: red">已经被选择</div>
                            <div class="okay-info">开始</div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import gamemap from "../components/importants/Map.vue"
    import render_mapper from "@/method/MapAdapter.js"

    export default {
        name: "NewSave",
        data() {
            return {
                activeName: '青兰',
                lst: render_mapper.lst_power,
                detail: render_mapper.pow_detail,
                selected: [], // 已有玩家选择的用户
            }
        },
        components: {
            gamemap
        },
        methods: {
            okay() {
                let powername = this.activeName;
                this.$axios.post(
                    "/room/playerroom/", {"power": powername}).then(
                    (response) => {
                        localStorage['token'] = response.data.token;
                        this.$notify.success("成功");
                        this.$router.push("/game")
                    }
                )

            }
        },
        mounted() {
            this.$axios.get(
                'room/user/'
            ).then(
                (response) => {
                    console.log(response.data);
                    this.selected = response.data
                }
            )
        }
    }
</script>

<style scoped>
    .okay-info {
        display: none;
    }

    .okay:hover ~ .okay-info {
        position: absolute;
        display: block;
        /*background: red;*/
        top: calc(100% - 130px);
        width: 100%;
        margin: auto;
        left: 35px;
        text-align: center;
    }

    .okay {
        background-image: url("../assets/buttons/ok.png");
        width: 74px !important;
        cursor: pointer;
        position: absolute;
        top: calc(100% - 110px);
        left: calc(50%);
        height: 75px !important;
        background-size: 100% 100%;
    }

    .okay:hover {
        background-image: url("../assets/buttons/ok-hover.png");
    }

    ::v-deep .el-tabs__nav-scroll {
        /*background-color: white;*/
        background-image: url("../assets/buttons/tab-framework.png");
        padding: 20px 10%;
        box-sizing: border-box;
        background-size: 100% 100%;


    }

    ::v-deep .el-tabs__nav-wrap::after {
        display: none !important;
    }

    ::v-deep .el-tabs__nav {
        margin: 0 20px;
    }

    ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 20px;
    }

    ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 20px;
    }

    /*悬浮样式*/
    ::v-deep .el-tabs__item {
        color: white;
    }

    ::v-deep .el-tabs__item:hover {
        color: #e1251b;
    }

    /*选中样式*/
    ::v-deep .el-tabs__item.is-active {
        color: #fff;
        font-weight: bold;
        color: red;
        /*background-color: #e1251b;*/
    }

    /*隐藏tab下面的一横*/
    ::v-deep .el-tabs__active-bar {
        display: none;
    }

    .inner-power {
        background-image: url("../assets/image/power-select-framework.png");
        width: 100%;
        padding-left: 80px;
        color: white;
        background-size: 100% 100%;
        height: 400px;
        object-fit: cover !important;
        object-position: top;
    }

    .block {
        width: 80%;
        overflow: hidden;

    }

    .inner_select {
        background: url("../assets/image/b3.png") no-repeat;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

    }
</style>
